<template>
    <div class="main">
        <div class="dic_head">
            <div class="dic_add">
                <el-button type="primary" @click="event.Add"> <el-icon size="18px"
                        color="var(--el-color-white)!important">
                        <Plus />
                    </el-icon>添加</el-button>
            </div>
            <div class="search">
                <el-input v-model="data.key" style="width: 350px" size="large" placeholder="请输入关键字查询"
                    :suffix-icon="Search" />
            </div>
        </div>
        <div class="dic_main">
            <el-skeleton animated :rows="8" :loading="data.isFisrt">
                <el-table :data="data.data" v-loading="data.loading" style="width: 100%">
                    <el-table-column label="序号" width="70" type="index"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="客户名称" width="100" prop="name">
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="类别" width="100" prop="explain">
                        <template #default="scope">
                            <el-tag>
                                {{ scope.row.level === 0 ? '非会员' : '会员' }}
                            </el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column :show-overflow-tooltip="true" label="电话" width="120" prop="count">
                        <template #default="scope">
                            <el-tag>
                                {{ scope.row.phone }}
                            </el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column :show-overflow-tooltip="true" label="负责人" width="90" prop="up_author">
                        <template #default="scope">
                            <el-tag>
                                {{ scope.row.responsibility == null ? "无" : scope.row.responsibility }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="下次联系时间" width="160" prop="nexttime">
                        <template #default="scope">
                            <el-tag type="success">
                                <el-icon>
                                    <timer />
                                </el-icon>
                                {{ scope.row.nexttime }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="进入公海时间" width="160" prop="nexttime">
                        <template #default="scope">
                            <el-tag type="danger">
                                <el-icon>
                                    <timer />
                                </el-icon>
                                {{ scope.row.sears }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="成功率" width="100">
                        <template #default="scope">
                            <el-tag
                                :type="scope.row.success_percent <= 20 ? 'danger' : scope.row.success_percent <= 50 ? 'warning' : 'success'">{{
                                scope.row.success_percent }}%</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="状态" width="110" prop="status">
                        <template #default="scope">
                            <el-tag
                                :type="scope.row.status == 1 ? 'primary' : scope.row.status == 2 ? 'success' : 'warning'">{{
                                scope.row.status == 1 ? '进行中' : scope.row.status == 2 ? '已转化' : '公海' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="跟进" width="100" prop="record_count">
                        <template #default="scope">
                            <el-button link type="primary" style="text-decoration-line: underline;"
                                @click="event.isDrawer(scope.row.id)">
                                {{ scope.row.record_count }}次<el-icon class="el-icon--right">
                                    <Upload />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" prop="name" width="160">
                        <template #default="scope">
                            <el-tooltip class="box-item" effect="light" content="详情" placement="top">
                                <el-button type="primary" :icon="Edit"  circle
                                    @click="event.Detail(scope.row.id)" />
                            </el-tooltip>

                            <el-tooltip v-if="scope.row.level === 0" class="box-item" effect="light" content="转会员"
                                placement="top">
                                <el-popconfirm @confirm="event.vip(scope.row.id)" title="确定转为会员吗？">
                                    <template #reference>
                                        <el-button type="success" :icon="Check" circle />
                                    </template>
                                </el-popconfirm>
                            </el-tooltip>

                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-foot" style="margin-left: 500px; margin-top: 20px;">
                    <el-pagination background size="small" v-model:current-page="data.pages!.page"
                        v-model:page-size="data.pages!.limit" layout="prev, pager, next" :total="data.pages?.total" />
                </div>
            </el-skeleton>
        </div>

        <el-drawer v-model="data.isDrawer" title="客户跟进记录" :direction="direction" :destroy-on-close="true"
            :before-close="handleClose">
            <record ref="ref_record" @add_record="event.add_record"></record>
        </el-drawer>

        <el-dialog :destroy-on-close="true" v-model="data.isModel" title="新增跟进记录" width="700">
            <add_record @myclose="event.add_close"></add_record>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import { reactive, watchEffect, } from 'vue'
import type { Page_Dto } from '@/Dto/Page_Dto';
import Api_Code from '@/Dto/Response/Api_code';
import { Timer } from '@element-plus/icons-vue'
import router from '@/router';
import { ElMessage, ElNotification } from 'element-plus';
import { Edit, Delete, Upload, Check ,Plus} from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
import { msg } from '@/utils/msg'
import type { customer_Dto } from '@/Dto/Request/customer/customer_Dto';
import { add_vip, GetAllCustomer } from '@/api/customer';
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import type { DrawerProps } from 'element-plus'
import record from '@/components/customer/record.vue'

import add_record from '@/components/customer/add_record.vue';


const page = reactive<Page_Dto>({
    page: 1,
    limit: 5,
    total: 0,
})

const data = reactive<customer_Dto>({
    isFisrt: true,
    loading: false,
    isModel: false,
    isEdit: false,
    pages: page,
    key: '',
    isDrawer: false,
    data: [],
  
})

const direction = ref<DrawerProps['direction']>('rtl')

const ref_record = ref(null);


const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确定要退出吗？')
        .then(() => {
            done()
            methods.bind();
        })
        .catch(() => {
            // catch error
        })
}

const event = {

    async vip(id: string) {
        data.loading = true;
        const res = await add_vip({
            id: id
        })
        if (res.code === Api_Code.ok) {

            data.loading = false,
                msg(res)
            methods.bind();
        } else {
            data.loading = false,
                msg(res)
        }

    },
    add_close() {
        data.isModel = false;
        ref_record.value.methods.bind();
    },
    add_record() {
        data.isModel = true
    },
    //打开跟进记录抽屉
    isDrawer(id: string) {
        sessionStorage.setItem("customer_id", id);
        data.isDrawer = true
    },
    Detail(id: string) {
        router.push('/cus/cusdetail/' + id)
    },
    Add() {
        router.push('/cus/addcus')
    }

}
const methods = {
    async bind() {
        data.loading = true
        const res = await GetAllCustomer({
            page: data.pages?.page || 1,
            limit: data.pages?.limit || 10,
            key: data.key || ''
        })
        if (res.code === Api_Code.ok) {
            data.data = res.data.data;
            data.pages!.total = res.data.total;
            data.isFisrt = false;
            data.loading = false;
        }
       





    }
}





watchEffect(() => {
    methods.bind();
})


</script>

<style scoped>
.main {
    width:100%;
    height: calc(100vh - 150px);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 8px;
}

.dic_head {
    margin: 10px;
    height: 60px;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex;
    position: relative;
    top: 8px;
}

.dic_add {
    padding-left: 20px;
    padding-top: 12px;
    flex: 1;
}

.search {
    flex: 3;
    line-height: 50px;
}

.dic_main {
    padding: 10px;
   
   
}

</style>